import React, { memo } from "react";

import { useSelector } from "react-redux";

import "./index.scss";
import { getSizeImage, formatMinuteSecond } from "@/utils/format-utils.js";

import WYThemeHeaderSong from "components/theme-header-song";

const WYRankingList = memo(function (props) {
  const { rankPlayObj } = useSelector((state) => ({
    rankPlayObj: state.getIn(["rank", "rankPlayObj"]),
  }));
  let { tracks, playCount } = rankPlayObj;
  tracks = tracks && tracks.length > 0 ? tracks : [];
  playCount = playCount ? playCount : 0;
  return (
    <div className="wy-rank-list">
      <WYThemeHeaderSong leng={tracks.length} total={playCount} />

      <div className="play-list">
        <table>
          <thead>
            <tr className="play-list-header">
              <th className="ranking"></th>
              <th className="title">标题</th>
              <th className="duration">时长</th>
              <th className="singer">歌手</th>
            </tr>
          </thead>
          <tbody>
            {tracks.length > 0 &&
              tracks.map((item, index) => (
                <tr key={item.id}>
                  <td>
                    <div className="rank-num">
                      <span className="num">{index + 1}</span>
                      <span className="new sprite_icon2"></span>
                    </div>
                  </td>
                  <td>
                    <div className="song-name">
                      <img src={getSizeImage(item.al.picUrl, 50)} alt="" />
                      <span className="play sprite_table"></span>
                      <span className="name">{item.name}</span>
                    </div>
                  </td>
                  <td>{formatMinuteSecond(item.dt)}</td>
                  <td>{item.ar[0].name}</td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
});

export default WYRankingList;
